<template>
  <q-layout view="hHh lpR fFf" class="bg-grey-1">
    <q-header class="bg-white text-grey-8">
      <q-toolbar class="GNL__toolbar">
        <q-btn
          flat
          dense
          round
          @click="$q.screen.gt.sm ? toogleMiniState() : toggleLeftDrawer()"
          aria-label="Menu"
          icon="menu"
          class="q-mr-sm"
        />

        <q-toolbar-title
          v-if="$q.screen.gt.xs"
          shrink
          class="row items-center no-wrap"
        >
          邮箱
        </q-toolbar-title>

        <q-space />

        <q-input
          class="GNL__toolbar-input"
          outlined
          dense
          v-model="search"
          color="bg-grey-7 shadow-1"
          placeholder="搜索"
        >
          <template v-slot:prepend>
            <q-icon v-if="search === ''" name="search" />
            <q-icon
              v-else
              name="clear"
              class="cursor-pointer"
              @click="search = ''"
            />
          </template>
          <template v-slot:append>
            <q-btn flat dense round aria-label="Menu" icon="arrow_drop_down">
            </q-btn>
          </template>
        </q-input>

        <q-space />

        <div class="q-gutter-sm row items-center no-wrap">
          <q-btn
            v-if="$q.screen.gt.sm"
            round
            dense
            flat
            color="text-grey-7"
            icon="apps"
          >
            <q-tooltip>APPs</q-tooltip>
          </q-btn>
          <q-btn round dense flat color="grey-8" icon="notifications">
            <q-badge color="red" text-color="white" floating> 2 </q-badge>
            <q-tooltip>通知</q-tooltip>
          </q-btn>
          <q-btn round flat>
            <q-avatar size="26px">
              <img :src="baseImg" />
            </q-avatar>
            <q-tooltip>Account</q-tooltip>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      :mini="miniState"
      class="bg-white"
      :width="280"
    >
      <q-scroll-area class="fit">
        <q-list padding class="text-grey-8">
          <q-item>
            <q-btn
              :rounded="!miniState"
              :round="miniState"
              icon="add"
              color="white"
              class="text-grey-8"
              :label="miniState ? '' : '写信'"
            ></q-btn>
          </q-item>
          <q-item
            class="GNL__drawer-item"
            v-ripple
            v-for="link in links1"
            :key="link.text"
            clickable
          >
            <q-item-section avatar>
              <q-icon :name="link.icon" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ link.text }}</q-item-label>
            </q-item-section>
          </q-item>

          <q-separator inset class="q-my-sm" />

          <q-item
            class="GNL__drawer-item"
            v-ripple
            v-for="link in links2"
            :key="link.text"
            clickable
          >
            <q-item-section avatar>
              <q-icon :name="link.icon" :class="link.color" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ link.text }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <q-list class="q-ma-sm q-mt-md">
        <q-expansion-item
          v-for="(mail, index) in mail_data"
          :key="index"
          style="border-radius: 10px"
          popup
          header-class="bg-white"
        >
          <template v-slot:header>
            <q-item-section avatar>
              <q-avatar>
                <img :src="mail.avatar" />
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <q-item-label>{{ mail.name }}</q-item-label>
              <q-item-label caption>{{ mail.date }}</q-item-label>
            </q-item-section>
          </template>

          <q-separator />
          <q-card>
            <q-card-section>
              {{ mail.msg }}
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </q-page-container>

    <q-page-sticky
      v-if="$q.screen.lt.sm"
      position="bottom-right"
      :offset="[10, 10]"
    >
      <q-btn round icon="add" direction="up" color="accent"> </q-btn>
    </q-page-sticky>
  </q-layout>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { baseImg } from 'pages/data/list';

const links1 = [
  { icon: 'move_to_inbox', text: '收件箱' },
  { icon: 'star', text: '已读' },
  { icon: 'send', text: '发件箱' },
  { icon: 'error', text: '垃圾' },
];
const links2 = [
  { icon: 'flag', text: '更新', color: 'text-orange' },
  { icon: 'group', text: '转发', color: 'text-red' },
  { icon: 'label', text: '推销', color: 'text-indigo-8' },
  { icon: 'forum', text: '讨论', color: 'text-teal' },
];

const $q = useQuasar();

// $q.screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

const leftDrawerOpen = ref(false);
const miniState = ref(false);

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};
const toogleMiniState = () => {
  miniState.value = !miniState.value;
};
const search = '';

let mail_data: Array<{
  name: string;
  avatar: string;
  date: string;
  msg?: string;
}> = [
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
  {
    name: '楚子航',
    avatar: baseImg,
    date: '2019年3月12日',
  },
];
onMounted(() => {
  mail_data = mail_data.map(function (item) {
    item['msg' as keyof typeof item] =
      '苏州的护城河边没有简薇，南京的郁金香路没有陈艺，大理的风花雪月没有杨思思，人性的背后是苍狗，我们都要做生活的高手。';
    return item;
  });
});
</script>

<style scoped>
.GNL__toolbar {
  height: 64px;
}

.GNL__toolbar-input {
  width: 55%;
}

.GNL__drawer-item {
  line-height: 24px;
  border-radius: 0 24px 24px 0;
  margin-right: 12px;
}

.GNL__drawer-item .q-item__section--avatar .q-icon {
  color: #5f6368;
}

.GNL__drawer-item .q-item__label {
  color: #3c4043;
  letter-spacing: 0.01785714em;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.GNL__drawer-footer-link {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.75rem;
}

.GNL__drawer-footer-link:hover {
  color: #000;
}
</style>
